<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>年度清洁成本优化报告生成器</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <style>
        /* 设置全局样式 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #333333;
            margin: 0;
            padding: 0;
            position: relative;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        /* 添加背景图片并设置透明度 */
        body::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('https://omo-oss-image.thefastimg.com/portal-saas/new2022070522274671681/cms/image/8a082ec7-6e2a-4295-87cd-213b2159f6c2.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 0.3;
            z-index: -1;
        }

        /* 包裹主要内容，添加内边距 */
        .content-wrapper {
            padding: 20px;
        }

        h1 {
            color: #007BFF;
            text-align: center;
            margin-bottom: 20px;
            font-size: 36px;
            text-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
        }

        form {
            background-color: rgba(248, 249, 250, 0.9);
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 123, 255, 0.1);
            margin-bottom: 30px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
        }

        label {
            display: block;
            margin-bottom: 10px;
            font-size: 18px;
            color: #007BFF;
        }

        input[type="text"],
        input[type="number"] {
            width: calc(100% - 20px);
            padding: 12px;
            margin-bottom: 20px;
            border: 1px solid #007BFF;
            border-radius: 5px;
            background-color: #ffffff;
            color: #333333;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }

        input[type="text"]:focus,
        input[type="number"]:focus {
            outline: none;
            border-color: #007BFF;
            box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
        }

        button {
            background-color: #007BFF;
            color: #ffffff;
            padding: 12px 25px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 18px;
            font-weight: bold;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #0056b3;
        }

        #report {
            background-color: rgba(248, 249, 250, 0.9);
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 123, 255, 0.1);
        }

        h2 {
            color: #007BFF;
            margin-top: 30px;
            margin-bottom: 15px;
            font-size: 28px;
        }

        h3 {
            color: #007BFF;
            margin-top: 25px;
            margin-bottom: 12px;
            font-size: 24px;
        }

        h4 {
            color: #007BFF;
            margin-top: 20px;
            margin-bottom: 10px;
            font-size: 20px;
        }

        table {
            border-collapse: collapse;
            width: 100%;
            margin-bottom: 30px;
        }

        th,
        td {
            border: 1px solid #dee2e6;
            padding: 12px;
            text-align: left;
        }

        th {
            background-color: #e9ecef;
            color: #007BFF;
        }

        p {
            line-height: 1.6;
            font-size: 16px;
        }

        /* 科技感图标样式 */
        .icon {
            color: #007BFF;
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <div class="content-wrapper">
        <h1><i class="fa-solid fa-robot icon"></i>年度清洁成本优化报告生成器</h1>
        <form id="inputForm">
            <div>
                <label for="cleaningArea"><i class="fa-solid fa-area-chart icon"></i>清洁面积（㎡）：</label>
                <input type="number" id="cleaningArea" required>
            </div>
            <div>
                <label for="floorRange"><i class="fa-solid fa-building icon"></i>所需清洁楼层：</label>
                <select id="floorRange">
                    <option value="1 - 10层">1 - 10层</option>
                    <option value="10 - 20层">10 - 20层</option>
                    <option value="20层以上">20层以上</option>
                </select>
            </div>
            <div>
                <label for="cleaningModes"><i class="fa-solid fa-broom icon"></i>清洁模式：</label>
                <input type="checkbox" id="mopping" value="洗地">洗地
                <input type="checkbox" id="dustPushing" value="尘推">尘推
                <input type="checkbox" id="vacuuming" value="吸尘">吸尘
            </div>
            <div>
                <label for="cleaningFrequency"><i class="fa-solid fa-repeat icon"></i>清洁频次（次/天）：</label>
                <input type="number" id="cleaningFrequency" required>
            </div>
            <div>
                <label for="cleanerCount"><i class="fa-solid fa-users icon"></i>保洁人数：</label>
                <input type="number" id="cleanerCount" required>
            </div>
            <div>
                <label for="floorWorkRatio"><i class="fa-solid fa-percentage icon"></i>保洁人员地面清洁工作占比（默认25%）：</label>
                <input type="number" id="floorWorkRatio" value="25">
            </div>
            <div>
                <label for="monthlySalary"><i class="fa-solid fa-money-bill icon"></i>保洁人员月工资（默认为4000元/月）：</label>
                <input type="number" id="monthlySalary" value="4000">
            </div>
            <button type="button" onclick="generateReport()">
                <i class="fa-solid fa-play icon"></i>生成报告
            </button>
        </form>
        <div id="report"></div>
        <button id="saveReportButton" style="display: none;" onclick="saveReport()">
            <i class="fa-solid fa-download icon"></i>保存报告为 PDF
        </button>
    </div>

    <script>
        function generateReport() {
            // 获取用户输入
            const cleaningArea = parseInt(document.getElementById('cleaningArea').value);
            const floorRange = document.getElementById('floorRange').value;
            const cleaningFrequency = parseInt(document.getElementById('cleaningFrequency').value);
            const cleanerCount = parseInt(document.getElementById('cleanerCount').value);
            const floorWorkRatio = parseFloat(document.getElementById('floorWorkRatio').value) / 100;
            const monthlySalary = parseInt(document.getElementById('monthlySalary').value);

            const mopping = document.getElementById('mopping').checked;
            const dustPushing = document.getElementById('dustPushing').checked;
            const vacuuming = document.getElementById('vacuuming').checked;

            let m1Count = 0;
            let k1VacCount = 0;

            if (mopping &&!dustPushing &&!vacuuming) {
                m1Count = Math.ceil(cleaningArea * cleaningFrequency / 7 / 700);
            } else if (!mopping && dustPushing &&!vacuuming) {
                m1Count = Math.ceil(cleaningArea * cleaningFrequency / 8 / 700);
            } else if (!mopping &&!dustPushing && vacuuming) {
                k1VacCount = Math.ceil(cleaningArea * cleaningFrequency / 8 / 375);
            } else if (mopping && dustPushing &&!vacuuming) {
                m1Count = Math.ceil(cleaningArea * cleaningFrequency / 7 / 700);
            } else if (mopping &&!dustPushing && vacuuming) {
                m1Count = Math.ceil(cleaningArea * cleaningFrequency / 7 / 700/2);
                k1VacCount = Math.ceil(cleaningArea * cleaningFrequency / 8 / 375/2);
            } else if (!mopping && dustPushing && vacuuming) {
                k1VacCount = Math.ceil(cleaningArea * cleaningFrequency / 8 / 375);
            } else if (mopping && dustPushing && vacuuming) {
                m1Count = Math.ceil(cleaningArea * cleaningFrequency / 7 / 700/2);
                k1VacCount = Math.ceil(cleaningArea * cleaningFrequency / 8 / 375/2);
            }

            const estimatedRobotText = [];
            if (m1Count > 0) {
                estimatedRobotText.push(`需要使用M1 ${m1Count}台`);
            }
            if (k1VacCount > 0) {
                estimatedRobotText.push(`需要使用K1 VAC ${k1VacCount}台`);
            }

            const compressedCleanerCount = Math.ceil(cleanerCount * floorWorkRatio);

            const m1Price = 110000;
            const k1VacPrice = 60000;
            const robotCost = m1Count * m1Price + k1VacCount * k1VacPrice;
            const annualSaving = compressedCleanerCount * monthlySalary * 12;
            const paybackPeriod = Math.ceil(robotCost / annualSaving);

            // 计算现有清洁年度成本
            const existingAnnualCost = cleanerCount * monthlySalary * 12;

            // 计算第一年成本
            const firstYearCost = (cleanerCount - compressedCleanerCount) * monthlySalary * 12 + robotCost;

            // 生成报告内容
            let reportContent = `
                <h2><i class="fa-solid fa-file-alt icon"></i>年度清洁成本优化报告</h2>
                <h3><i class="fa-solid fa-info-circle icon"></i>一、客户清洁现状</h3>
                <p>清洁面积：${cleaningArea} ㎡</p>
                <p>所需清洁楼层：${floorRange}</p>
                <p>清洁模式：${mopping? '洗地' : ''} ${dustPushing? '尘推' : ''} ${vacuuming? '吸尘' : ''}</p>
                <p>清洁频次：${cleaningFrequency} 次/天</p>
                <p>保洁人数：${cleanerCount} 人</p>
                <p>保洁人员地面清洁工作占比：${floorWorkRatio * 100}%</p>
                <p>保洁人员月工资：${monthlySalary} 元/月</p>
                <p>现有清洁年度成本：${existingAnnualCost} 元</p>
                <h3><i class="fa-solid fa-robot icon"></i>二、机器人配置方案</h3>
                <p>${estimatedRobotText.join('，')}</p>
                <p>预估替换保洁人员数量为 ${compressedCleanerCount} 人</p>
                <h3><i class="fa-solid fa-money-bill icon"></i>三、引入机器人后的成本分析</h3>
                <p>引入机器人后第一年清洁成本投入 ${firstYearCost} 元</p>
                <p>预估第 ${paybackPeriod} 年后回本</p>
                <h3><i class="fa-solid fa-check-circle icon"></i>四、结论</h3>
                <p>通过引入我们公司的商用清洁机器人，虽然在第一年需要投入机器人购置成本，但从长远来看，预计在 ${paybackPeriod} 年后可以收回成本，之后每年可节省 ${annualSaving} 元的清洁成本。同时，机器人的高效清洁能力还可以提高清洁效率，提升整体运营水平。</p>
                <h3><i class="fa-solid fa-lightbulb icon"></i>五、建议</h3>
                <p>建议尽快引入 ${m1Count + k1VacCount} 台商用清洁机器人，以实现清洁成本的优化和运营效率的提升。同时，可以根据实际运营情况，进一步评估机器人的使用效果，为后续的设备采购和人员配置提供参考。</p>
            `;

            document.getElementById('report').innerHTML = reportContent;
            document.getElementById('saveReportButton').style.display = 'block';
        }

        function saveReport() {
            html2canvas(document.getElementById('report')).then(function (canvas) {
                const imgData = canvas.toDataURL('image/png');
                const pdf = new jspdf.jsPDF();
                const imgWidth = 200;
                const imgHeight = (canvas.height * imgWidth) / canvas.width;
                pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
                pdf.save('年度清洁成本优化报告.pdf');
            });
        }
    </script>
</body>

</html>